import React, { useState, useEffect } from 'react';
import './tablecomp.css';
interface KeyVal {
    [key: string]: string | number
}
interface Props {
    fixHead?: boolean;
    fixLeftCol?: number;
    fixRightCol?: number;
    list: KeyVal[],
    columns: {
        prop: string,
        width?: string | number,
        label: string
    }[]
} 

function Tablecomp(props: Props) {
    const {
        fixHead = false,
        fixLeftCol = 0,
        fixRightCol = 0,
        list = [],
        columns = []
    } = props;
    const [page, setPage] = useState<number>(1);
    const [totalPage, setTotalPage] = useState<number>(1);
    const pageSize = 10;
    const [tableList, setTableList] = useState<KeyVal[]>([]);
    const [sorttype, setSorttype] = useState<string>('');
    const [sortprop, setSortprop] = useState<string>('');
    
    useEffect(() => {
        getTableList();
        getTotalPage();
    }, [list, page, sorttype, sortprop]);

    const selectSort = (type, prop) => {
        if (sorttype === type && sortprop === prop) {
            setSorttype('');
            setSortprop('');
        } else {
            setSorttype(type);
            setSortprop(prop);
        }
    }

    const getTotalPage = () => {
        const tempTotalPage = Math.ceil(list.length / pageSize);
        setTotalPage(tempTotalPage);
    }
    const getTableList = () => {
        const start = (page - 1) * pageSize;
        const end = page * pageSize;
        const tempList = [...list];
        tempList.sort((pre, nex) => {
            let dir = 0;
            if (sorttype === 'asc') {
                dir = 1;
            } else if (sorttype === 'dsc') {
                dir = -1;
            }
            if (pre[sortprop] > nex[sortprop]) {
                return dir;
            } else if (pre[sortprop] < nex[sortprop]) {
                return -1 * dir;
            } else {
                return 0;
            }
        })
        const result = tempList.slice(start, end);
        setTableList(result);
    }
    const toPreviewpage = () => {
        if (page > 1) {
            toPage(page - 1);
        }
    }
    const toNextpage = () => {
        if (page < totalPage) {
            toPage(page + 1);
        }
    }
    const toPage = (pagenum: number) => {
        setPage(pagenum);
    }
    

    const contentScroll = (event) => {
        const st = event.target.scrollTop;
        const fldom = document.getElementById("fixleft")!;
        const frdom = document.getElementById("fixright")!;
        fldom.scrollTop = st;
        frdom.scrollTop = st;
    }

    const leftScroll = (event) => {
        const st = event.target.scrollTop;
        const contentdom = document.getElementById("content")!;
        const frdom = document.getElementById("fixright")!;
        contentdom.scrollTop = st;
        frdom.scrollTop = st;
    }
    const rightScroll = (event) => {
        const st = event.target.scrollTop;
        const fldom = document.getElementById("fixleft")!;
        const contentdom = document.getElementById("content")!;
        fldom.scrollTop = st;
        contentdom.scrollTop = st;
    }

    return (<div className='table'>
        {
            fixHead && fixLeftCol > 0 &&
            <div className='table-body-over-left-head'>
                
                <div className={'table-head'}>
                    {
                        columns.slice(0, fixLeftCol).map((col, colIdx) => {
                            return (
                                <div className='table-td'
                                    key={colIdx}
                                    style={{
                                        minWidth: `${(col.width || 0)}px`,
                                        maxWidth: `${(col.width || 0)}px`
                                    }}>
                                    {col.label}
                                    <div className='flcc'>
                                        <div className={'topsort ' + 
                                            ((col.prop === sortprop && sorttype === 'asc') ? 'on' : '')
                                        }
                                            onClick={() => {
                                                selectSort('asc', col.prop)
                                            }}>
                                        </div>
                                        <div className={'bottomsort ' + 
                                            ((col.prop === sortprop && sorttype === 'dsc') ? 'on' : '')
                                        }
                                            onClick={() => {
                                                selectSort('dsc', col.prop)
                                            }}>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        }
        {
            fixLeftCol > 0 &&
            <div className='table-body-over-left' id="fixleft"
            onScroll={leftScroll}>
                <div className='fixleft'>
                    {
                        fixHead ?
                        <div className='table-shadowhead'>
                        </div> :
                            <div className={'table-head ' + (fixHead ? 'fixhead' : '')}>
                            {
                                columns.slice(0, fixLeftCol).map((col, colIdx) => {
                                    return (
                                        <div className='table-td'
                                            key={colIdx}
                                            style={{
                                                minWidth: `${(col.width || 0)}px`,
                                                maxWidth: `${(col.width || 0)}px`
                                            }}>
                                            {col.label}
                                            <div className='flcc'>
                                                <div className={'topsort ' + 
                                                    ((col.prop === sortprop && sorttype === 'asc') ? 'on' : '')
                                                }
                                                    onClick={() => {
                                                        selectSort('asc', col.prop)
                                                    }}>
                                                </div>
                                                <div className={'bottomsort ' + 
                                                    ((col.prop === sortprop && sorttype === 'dsc') ? 'on' : '')
                                                }
                                                    onClick={() => {
                                                        selectSort('dsc', col.prop)
                                                    }}>
                                                </div>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    }
                    {
                        tableList.map((item, idx) => {
                            return (<div className='table-tr'
                                key={idx}
                                >
                                {
                                    columns.slice(0, fixLeftCol).map((col, colIdx) => {
                                        return (
                                            <div className={'table-td fixed'}
                                                key={colIdx}
                                                style={{
                                                    minWidth: `${(col.width || 0)}px`,
                                                    maxWidth: `${(col.width || 0)}px`
                                                }}>
                                                {item[col.prop] || ''}
                                            </div>
                                        )
                                    })
                                }
                                </div>)
                            })
                        }
                    </div>
    
            </div>
        }
        {
            fixHead && fixRightCol > 0 &&
            <div className='table-body-over-right-head'>
                
                <div className={'table-head'}>
                    {
                        columns.slice(columns.length - fixRightCol).map((col, colIdx) => {
                            return (
                                <div className='table-td'
                                    key={colIdx}
                                    style={{
                                        minWidth: `${(col.width || 0)}px`,
                                        maxWidth: `${(col.width || 0)}px`
                                    }}>
                                    {col.label}
                                    
                                    <div className='flcc'>
                                        <div className={'topsort ' + 
                                            ((col.prop === sortprop && sorttype === 'asc') ? 'on' : '')
                                        }
                                            onClick={() => {
                                                selectSort('asc', col.prop)
                                            }}>
                                        </div>
                                        <div className={'bottomsort ' + 
                                            ((col.prop === sortprop && sorttype === 'dsc') ? 'on' : '')
                                        }
                                            onClick={() => {
                                                selectSort('dsc', col.prop)
                                            }}>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        }
        {
            fixRightCol > 0 &&
            <div className='table-body-over-right' id="fixright"
            onScroll={rightScroll}>
                <div className='fixright'>
                    {
                        fixHead ?
                        <div className='table-shadowhead'>
                        </div> :
                            <div className={'table-head ' + (fixHead ? 'fixhead' : '')}>
                            {
                                columns.slice(columns.length - fixRightCol).map((col, colIdx) => {
                                    return (
                                        <div className='table-td'
                                            key={colIdx}
                                            style={{
                                                minWidth: `${(col.width || 0)}px`,
                                                maxWidth: `${(col.width || 0)}px`
                                            }}>
                                            {col.label}
                                            
                                            <div className='flcc'>
                                                <div className={'topsort ' + 
                                                    ((col.prop === sortprop && sorttype === 'asc') ? 'on' : '')
                                                }
                                                    onClick={() => {
                                                        selectSort('asc', col.prop)
                                                    }}>
                                                </div>
                                                <div className={'bottomsort ' + 
                                                    ((col.prop === sortprop && sorttype === 'dsc') ? 'on' : '')
                                                }
                                                    onClick={() => {
                                                        selectSort('dsc', col.prop)
                                                    }}>
                                                </div>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    }
                    {
                        tableList.map((item, idx) => {
                            return (<div className='table-tr'
                                key={idx}
                                >
                                {
                                    columns.slice(columns.length - fixRightCol).map((col, colIdx) => {
                                        return (
                                            <div className={'table-td fixed'}
                                                key={colIdx}
                                                style={{
                                                    minWidth: `${(col.width || 0)}px`,
                                                    maxWidth: `${(col.width || 0)}px`
                                                }}>
                                                {item[col.prop] || ''}
                                            </div>
                                        )
                                    })
                                }
                                </div>)
                            })
                        }
                    </div>
    
            </div>
        }
        <div className='table-content-out'>
            <div className='table-content' id="content"
                onScroll={contentScroll}>
                <div className={'table-head ' + (fixHead ? 'fixhead' : '')}>
                    {
                        columns.map((col, colIdx) => {
                            return (
                                <div className='table-td'
                                    key={colIdx}
                                    style={{
                                        minWidth: `${(col.width || 0)}px`,
                                        maxWidth: `${(col.width || 0)}px`
                                    }}>
                                    {col.label}
                                    
                                    <div className='flcc'>
                                        <div className={'topsort ' + 
                                            ((col.prop === sortprop && sorttype === 'asc') ? 'on' : '')
                                        }
                                            onClick={() => {
                                                selectSort('asc', col.prop)
                                            }}>
                                        </div>
                                        <div className={'bottomsort ' + 
                                            ((col.prop === sortprop && sorttype === 'dsc') ? 'on' : '')
                                        }
                                            onClick={() => {
                                                selectSort('dsc', col.prop)
                                            }}>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
                {
                    fixHead &&
                    <div className='table-shadowhead'>
                    </div>
                }
                <div className='table-body'>  
                    {
                        tableList.map((item, idx) => {
                            return (<div className='table-tr'
                                key={idx}
                                >
                                <div className='trcenter'>
                                    {
                                        columns.map((col, colIdx) => {
                                            return (
                                                <div className={'table-td ' +
                                                    (colIdx < fixLeftCol ? 'blank' : '')}
                                                    key={colIdx}
                                                    style={{
                                                        minWidth: `${(col.width || 0)}px`,
                                                        maxWidth: `${(col.width || 0)}px`
                                                    }}>
                                                    {item[col.prop] || ''}
                                                </div>
                                            )
                                        })
                                    }
                                </div>
                            </div>)
                        })   
                    }
                </div>
            </div>
        </div>
        <div className='table-page'>
            <div className={'pagebtn ' + (page === 1 ? 'disable' : '') }
                onClick={() => {
                    toPreviewpage()
                }}>
                上一页
            </div>
            {
                page > 2 && 
                <div>...</div>
            }
            {
                page > 1 && 
                <div  className={'pagebtn'}
                    onClick={() => {
                        toPage(page - 1)
                    }}>{page - 1}</div>
            }
            <div  className={'pagebtn now'}>{page}</div>
            {
                page < totalPage && 
                <div  className={'pagebtn'}
                    onClick={() => {
                        toPage(page + 1)
                    }}>{page + 1}</div>
            }
            {
                page < (totalPage - 1) && 
                <div>...</div>
            }
            <div  className={'pagebtn ' + (page === totalPage ? 'disable' : '') }
                onClick={() => {
                    toNextpage()
                }}>
                下一页
            </div>
        </div>
    </div>);
}
export default Tablecomp;